@charset "utf-8";

p{
	width: 200px;
	border: 1px solid gray;
	background-color: silver;
	margin: 5px;
	padding: 5px;
}

div{
	/* 设置弹性，将容器盒模型作为块级弹性伸缩盒显示（旧版本） */
	/*display: -moz-box;
	display: -webkit-box;
	display: box;*/

	/* 设置弹性，将容器盒模型作为内联级弹性伸缩盒显示（旧版本） */
	display: -moz-inline-box;
	display: -webkit-inline-box;
	display: inline-box;
}
/************************* box-orient *************************/
/*实现盒子内部元素的流动方向 */
div{
	/* 默认，从左到右 */
	/*-webkit-box-orient: horizontal;*/
	/* 从上到下 */
	/*-webkit-box-orient: vertical;*/
	/* 沿着内联轴排列 */
	/*-webkit-box-orient: inline-axis;*/
	/* 沿着块轴排列 */
	/*-webkit-box-orient: block-axis;*/
}

/************************* box-direction *************************/
div{
	/* 逆序 */
	/*-webkit-box-direction: reverse;*/
}

/************************* box-pack *************************/
div{
	/* 设置宽度和背景颜色方便观察 */
	/*width: 100%;*/
	/*background-color: red;*/

	/* 伸缩项目以起始点靠齐 */
	/*-webkit-box-pack: start;*/

	/* 伸缩项目以结束点靠齐 */
	/*-webkit-box-pack: end;*/

	/* 伸缩项目以中心点靠齐 */
	/*-webkit-box-pack: center;*/

	/* 伸缩项目平均分布，-webkit- 支持， -moz- 不支持 */
	/*-webkit-box-pack: justify;*/
}

/************************* box-align *************************/
div{
	/* 伸缩项目以顶部为基准，清理下部额外空间 */
	/*-webkit-box-align: start;*/

	/* 伸缩项目以底部为基准，清理上部额外空间 */
	/*-webkit-box-align: end;*/

	/* 居中对齐，平均清理上下部额外空间 */
	/*-webkit-box-align: center;*/

	/* 伸缩项目以基线为基准，清理额外的空间 */
	/*-webkit-box-align: baseline;*/

	/* 伸缩项目填充整个容器，默认 */
	/*-webkit-box-align: stretch;*/
}

/************************* box-flex *************************/
/* 下面相当于把父元素的整个宽度分成 （1+3+1）份，每份 20% */
p:first-child{
	/*-webkit-box-flex: 1;*/
}

p:nth-child(2){
	/*-webkit-box-flex: 3;*/
}

p:last-child{
	/*-webkit-box-flex: 1;*/
}

/************************* box-ordinal-group *************************/
p:first-child{
	/*-webkit-box-ordinal-group: 3;*/
}